<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>代取快递</title>
    <link rel="stylesheet" href="<?php echo IMG_PATH ?>bdkd/css/common.css" />
    <link rel="stylesheet" href="<?php echo IMG_PATH ?>bdkd/css/daiqu.css" />
    <style>
        .qjrxx{
            border:none;
            outline:none;
            background:#fff;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="message">
        <input type="hidden" name="gname" id="gname1" value="" >
        <input type="hidden" name="gphone" id="gphone1" value="" >
        <div class="consignee">
            <b></b>
            <p><input class="qjrxx" type="text" placeholder="取件人信息" value=""/></p>
            <textarea id="qjxxxx" name="text" disabled="disabled" placeholder="请输入详细的取件人信息,以便我们更好的为您服务" value="" style="border: none;" ></textarea>
        </div>
        <div class="waikuang">
            <div class="express daiquxinxi">
                <div>
                    <p>请输入您要代取的快递信息<span>(可直接粘贴)</span></p>

                </div>
                <div>
                    <textarea class="dqxx remark" placeholder="请详细写明快递的所在位置/站点名称/取件编码 (此处只能填写一条取件信息)" value="" style="border: none;"></textarea>
                </div>
            </div>
        </div>
        <div class="go">
            <img src="<?php echo IMG_PATH ?>bdkd/img/jiahao@2x.png"/>
            <span>继续取件</span>
        </div>
        <div class="cost">

            <div class="cost_left">
                <div>
                    <p>收费：<span class="shoufei">3</span>元/件<img class="biaozhun" src="<?php echo IMG_PATH ?>bdkd/img/wenhao@2x.png"/></p>
                </div>
                <div>
                    <p>共计：<span id="boxNum">0</span>件</p>
                </div>
            </div>
            <div class="rates">
                <div class="xuanze">
                    <p>0-5公斤</p>
                    <div>
                        <span class="num">3</span>
                        <span>元</span>
                    </div>
                </div>
                <div class="xuanze">
                    <p>5-10公斤</p>
                    <div>
                        <span class="num">5</span>
                        <span>元</span>
                    </div>
                </div>
            </div>
            <div class="cost_right">
                <p>预估：<span class="yugu">0</span>元</p>
            </div>

        </div>
    </div>
    <div class="pick">
        <div class="xieyi">
            <img src="<?php echo IMG_PATH ?>bdkd/img/yhq1@2x.png"/>
            <p>我已阅读并同意</p>
            <span>《便递服务协议》</span>
        </div>
        <div class="pick_up" onclick="sends()">
            <p>开始取件</p>
            <p><img src="<?php echo IMG_PATH ?>bdkd/img/-@2x.png"/>限2公里内，10公斤内</p>
        </div>
    </div>
    <div class="fucen">
        <div class="cha" onclick="guanbi()">
            <img src="<?php echo IMG_PATH ?>bdkd/img/@2x.png" height="30" width="28" alt="">
        </div>
        <p>是否确认删除订单？</p>
        <div class="qxdd" >
            确认
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="<?php echo IMG_PATH ?>bdkd/js/jquery-1.11.0.js" ></script>
<script type="text/javascript">

    function sends(){
        // alert(22);


        var gname=$(" input[ name='gname' ] ").val();
        var gphone=$(" input[ name='gphone' ] ").val();
        var gaddress=$("#qjxxxx").val();
        console.log(gname);
        console.log(gphone);
        console.log(gaddress);


        var remarkArr=[];
        var remark=$('.remark');
        for(var i = 0;i<remark.length;i++){
            remarkArr[i]=remark.eq(i).val();
          //  console.log(dqxx.eq(i).val());

        }
        console.log(remarkArr);//return false;

        var pdsftrxx = $('.dqxx').val();
       // console.log(pdsftrxx);
        if($('.dqxx').val().length===0){
            alert('请填写取件信息');
            return false;
        }
        var i = $('.xyzt').val();
        if(i==0){
            alert('请阅读并同意《便递服务协议》');
            return false;
        }
       // return false;
        $.ajax({
            url:"<?php echo SITE_PATH ?>work/bexpress/getOrder",
            type:"post",
            data:{
                'gname':gname,
                'gphone':gphone,
                'gaddress':gaddress,
                'remarkArr':remarkArr

            },
            success: function(data){
                console.log(data);
                if(data.result==1){
                    alert('下单成功!');
                    //http://s.biandikeji.com/work/borders/untreated
                    window.location.href = '<?php echo SITE_PATH ?>work/borders/untreated';
                }else {
                    alert(data.msg);
                }
            },
            error: function(){
                alert('提交失败0!');
            }

        })
    }




    window.onload=function(){

        //1.首次加载的时候 调用动态设置rem的api
        setRemSize();
        //2.当用户企图更改浏览器宽度 自动获取屏幕宽度 在计算rem赋值给根元素里面的font-size
        window.addEventListener("resize",setRemSize,false);
        function setRemSize(){
            //1.在任何尺寸中都可以获得rem值
            //获得屏幕的宽度----获取到了rem值    rem=屏幕宽度/7.5+"px"
            var _clientWidth=document.documentElement.clientWidth/7.5+"px";
            //console.log(_clientWidth);
            //将得到的rem值赋值给根元素的font-size
            document.documentElement.style.fontSize=_clientWidth;
        }
    }

    var Qjrxx=document.querySelector(".qjrxx");
    var Qjxxxx=document.querySelector("#qjxxxx");
    var g=localStorage;
    var fstr="";
    var fn=g.getItem('fname');
    var fd=g.getItem('fdianhua');
    $('#gname1').val(fn);
    $('#gphone1').val(fd);
    fstr+=fn+'  '+fd;
    if(fn&&fd) {
        Qjrxx.value = fstr;
        Qjrxx.style.color = '#333';
    }
    var f ="";
    var fx=g.getItem('fdizhi');
    f+=fx;
    if(fx){
        Qjxxxx.innerHTML=f;
        Qjxxxx.style.color='#333';
    }



    $('.consignee').click(function(){
        window.location.href="<?php echo SITE_PATH ?>work/bexpress/getGood";
    })

    /*  点击问号实现效果 跳出弹框显示费用标准提示信息 */
    var i =0;
    $(".biaozhun").on("click",function(){
        i++;
        if(i==1){
            $('.rates').css('display','block');
            $('.rates .xuanze').each(function(index,item){
                // console.log($(item).children().eq(1).children().eq(0).html());
                $(item).click(function(){
                    // console.log(this);
                    var danjia =Number($(this).children().eq(1).children().eq(0).html());
                    $('.shoufei').html(danjia);
                    if($('.waikuang').children().last().children().eq(1).children().last().val().length!==0){
                        var jiediangeshu1 = $('.waikuang').children().length;
                        // console.log(jiediangeshu1);
                        // var danjia = Number($('.shoufei').html());
                        // $('#boxNum').html(jiediangeshu1);
                        $('.yugu').text(jiediangeshu1*danjia);
                    }else{
                        var jiediangeshu1 = $('.waikuang').children().length-1;
                        // console.log(jiediangeshu1);
                        // var danjia = Number($('.shoufei').html());
                        // $('#boxNum').html(jiediangeshu1);
                        $('.yugu').text(jiediangeshu1*danjia);
                    }
                })
            })

        }else{
            $('.rates').css('display','none');
            i=0;
        }

    })
    var lastNode1 = $('.waikuang').children().last().children().eq(1).children().last();
    lastNode1.blur(function(){
        if($('.waikuang').children().last().children().eq(1).children().last().last().val().length===0){
            var jiediangeshu2 = $('.waikuang').children().length-1;
            // console.log(jiediangeshu2);
            $('#boxNum').text(jiediangeshu2);
            var danjia = Number($('.shoufei').html());
            $('.yugu').text(jiediangeshu2*danjia);
        }else{
            var jiediangeshu2 = $('.waikuang').children().length;
            // console.log(jiediangeshu2);
            var danjia = Number($('.shoufei').html());
            $('#boxNum').text(jiediangeshu2);
            $('.yugu').text(jiediangeshu2*danjia);
        }
    })
    //     点击加号添加结点以及点击叉号删除结点
    $(".go").on("click",function(){
        var dqxxVal = $('.go').prev().children().last().children().eq(1).children().last().val();
       // console.log(dqxxVal);
        if(dqxxVal.length===0){
            $('.go').attr('disabled','disabled');
        }else{
            $('.go').prev().children().last().children().eq(1).children().last().attr('disabled','disabled');
            var cc=$("<div class='express1 daiquxinxi'><img class='deca' onclick='add(this)'  src='<?php echo IMG_PATH ?>bdkd/img/icon@2x.png'/><div><p>请输入您要代取的快递信息</p><span></span><textarea class='remark' name='text'  placeholder='请详细写明快递所在的位置/站点名称/取件编码（此处只能填写一条取件信息）'  style='border: none;'></textarea></div></div>")
            $('.waikuang').append(cc)
            $('.go').removeAttr('disabled','disabled');
            if($('.waikuang').children().last().children().eq(1).children().last().val().length===0){
                var jiediangeshu = $('.waikuang').children().length-1;
                // console.log(jiediangeshu);
                $('#boxNum').html(jiediangeshu);
                var danjia = Number($('.shoufei').html());
                $('.yugu').text(jiediangeshu*danjia);
            }
        }
        var lastNode = $('.waikuang').children().last().children().eq(1).children().last();
        lastNode.blur(function(){
            if($('.waikuang').children().last().children().eq(1).children().last().val().length!==0){
                var jiediangeshu1 = $('.waikuang').children().length;
                // console.log(jiediangeshu1);
                var danjia = Number($('.shoufei').html());
                $('#boxNum').html(jiediangeshu1);
                $('.yugu').text(jiediangeshu1*danjia);
            }else{
                var jiediangeshu1 = $('.waikuang').children().length-1;
                // console.log(jiediangeshu1);
                var danjia = Number($('.shoufei').html());
                $('#boxNum').html(jiediangeshu1);
                $('.yugu').text(jiediangeshu1*danjia);
            }
        })
    })
    function add(a){
        $('.fucen').css('display','block');
        $('.qxdd').click(function(){
            $(a).parent().remove();
            $('.fucen').css('display','none');
            $('.waikuang').children().last().children().eq(1).children().last().removeAttr('disabled','disabled');
            if($('.waikuang').children().last().children().eq(1).children().last().val().length!==0){
                var jiediangeshu3 = $('.waikuang').children().length;
                // console.log(jiediangeshu3);
                $('#boxNum').html(jiediangeshu3);
                var danjia = Number($('.shoufei').html());
                $('.yugu').text(jiediangeshu3*danjia);
            }else{
                var jiediangeshu3 = $('.waikuang').children().length-1;
                // console.log(jiediangeshu3);
                $('#boxNum').html(jiediangeshu3);
                var danjia = Number($('.shoufei').html());
                $('.yugu').text(jiediangeshu3*danjia);
            }
        })
    }
    function guanbi(){
        $('.fucen').css('display','none');
    }







</script>

</html>